<!DOCTYPE html>
<!--[if lt IE 7]> <html class="ie lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>    <html class="ie lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>    <html class="ie lt-ie9"> <![endif]-->
<!--[if gt IE 8]> <html> <![endif]-->
<!--[if !IE]><!--><html lang="en"><!-- <![endif]-->
<head>
	<title>Happy Birthday</title>
	<meta charset="UTF-8" />
	<meta name="description" content="Happy Birthday">
	<meta name="robots" content="index, follow" />
	<link rel="author" href="https://plus.google.com/u/1/+AyushSharma1/" /> 
    <meta name="keywords" content="Birthday, Happy">
    <!-- Strat of Facebook Meta -->
    <meta property="og:type" content="E-Greeting" />
    <meta property="og:image" content="favicon.ico" />
    <meta property="og:description" content="Wish you a very Happy Birthday">
    <!-- End of Facebook Meta Tags -->
	<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0,minimal-ui">
	<meta name="apple-mobile-web-app-capable" content="yes">
	<meta name="apple-mobile-web-app-status-bar-style" content="black">
	<meta name="full-screen" content="yes">
	<meta name="x5-fullscreen" content="true">
	<meta name="HandheldFriendly" content="true">
	<meta name="MobileOptimized" content="320">
	<meta http-equiv="X-UA-Compatible" content="IE=9; IE=8; IE=7; IE=EDGE" />
	<link rel="stylesheet" href="css/bootstrap.min.css">
	<link rel="stylesheet" type="text/css" href="css/stylesheet.css">
	<link rel="stylesheet" type="text/css" href="css/loading.css">
	<link href='css/Signika.css' rel='stylesheet' type='text/css'>
	<!-- <link href='http://fonts.googleapis.com/css?family=Nunito' rel='stylesheet' type='text/css'> -->
	<link rel="stylesheet" type="text/css" href="css/cake.css">
	<!-- <link rel="stylesheet/less" href="cake.less">
	<script src="http://cdnjs.cloudflare.com/ajax/libs/less.js/2.1.0/less.js"></script> -->
	<style type="text/css">
/*自适应圆角投影*/
.round_shade_box{width:1px; height:1px; font-size:0; display:none; _background:white; _border:1px solid #cccccc;}
.round_shade_top{margin:0 12px 0 10px; background:url(image/zxx_round_shade.png) repeat-x -20px -40px; _background:white; zoom:1;}
.round_shade_topleft{width:11px; height:10px; background:url(image/zxx_round_shade.png) no-repeat 0 0; _background:none; float:left; margin-left:-11px; position:relative;}
.round_shade_topright{width:12px; height:10px; background:url(image/zxx_round_shade.png) no-repeat -29px 0; _background:none; float:right; margin-right:-12px; position:relative;}
.round_shade_centerleft{background:url(image/zxx_round_shade.png) no-repeat 0 -1580px; _background:none;}
.round_shade_centerright{background:url(image/zxx_round_shade.png) no-repeat right -80px; _background:none;}
.round_shade_center{font-size:14px; margin:0 12px 0 10px; padding:10px; background:white; letter-spacing:1px; line-height:1.5;}
.round_shade_bottom{margin:0 12px 0 11px; background:url(image/zxx_round_shade.png) repeat-x -20px bottom; _background:white; zoom:1;}
.round_shade_bottomleft{width:11px; height:10px; background:url(image/zxx_round_shade.png) no-repeat 0 -30px; _background:none; float:left; margin-left:-11px; position:relative;}
.round_shade_bottomright{width:12px; height:10px; background:url(image/zxx_round_shade.png) no-repeat -29px -30px; _background:none; float:right; margin-right:-12px; position:relative;}
.round_shade_top:after,.round_shade_bottom:after,.zxx_zoom_box:after{display:block; content:"."; height:0; clear:both; overflow:hidden; visibility:hidden;}
.round_box_close{padding:2px 5px; font-size:12px; color:#ffffff; text-decoration:none; border:1px solid #cccccc; -moz-border-radius:4px; -webkit-border-radius:4px; background:#000000; opacity:0.8; filter:alpha(opacity=80); position:absolute; right:-5px; top:-5px;}
.round_box_close:hover{opacity:0.95; filter:alpha(opacity=95);}
/*自适应圆角投影结束*/
.zxx_zoom_left{width:45%; float:left; margin-top:20px; border-right:1px solid #dddddd;}
.zxx_zoom_left h4{margin:5px 0px 15px 5px; font-size:1.1em;}
.small_pic{display:inline-block; width:48%; height:150px; font-size:120px; text-align:center; *display:inline; zoom:1; vertical-align:middle;}
.small_pic img{padding:3px; background:#ffffff; border:1px solid #cccccc; vertical-align:middle;}
.zxx_zoom_right{width:50%; float:left; margin-top:20px; padding-left:2%;}
.zxx_zoom_right h4{margin:5px 0px; font-size:1.1em;}
.zxx_zoom_right p.zxx_zoom_word{line-height:1.5; font-size:1.05em; letter-spacing:1px; margin:0 0 35px; padding-top:5px;}
</style>
</head>

<body>
	<div class="loading"></div>
	<audio class="song" controls loop>
        <source src="hbd.mp3"></source>
	   Your browser isn't invited for super fun audio time.
    </audio>
    <div class="balloons text-center" id="b1">
    	<h2 style="color:#F2B300;">B</h2>
    </div>
    <div class="balloons text-center" id="b2">
    	<h2 style="color:#0719D4;">i</h2>
    </div>
	<div class="balloons text-center" id="b3">
    	<h2 style="color:#D14D39;">r</h2>
    </div>
	<div class="balloons text-center" id="b4">
    	<h2 style="color:#8FAD00;">t</h2>
    </div>
	<div class="balloons text-center" id="b5">
    	<h2 style="color:#8377E4;">h</h2>
    </div>
    <div class="balloons text-center" id="b6">
    	<h2 style="color:#99C96A;">d</h2>
    </div>
    <div class="balloons text-center" id="b7">
    	<h2 style="color:#20CFB4;">a</h2>
    </div>
    <div class="balloons text-center" id="b8">
    	<h2 style="color:#8377E4;">y</h2>
    </div>

    <img src="image/Balloon-Border.png" width="100%" class="balloon-border">
 

	<div class="container">
		
		<div class="row">
			<div class="col-md-2 col-xs-2 bulb-holder">
				<div class="bulb" id="bulb_yellow"></div>
			</div>
			<div class="col-md-2 col-xs-2 bulb-holder">
				<div class="bulb" id="bulb_red"></div>
			</div>
			<div class="col-md-2 col-xs-2 bulb-holder">
				<div class="bulb" id="bulb_blue"></div>
			</div>
			<div class="col-md-2 col-xs-2 bulb-holder">
				<div class="bulb" id="bulb_green"></div>
			</div>
			<div class="col-md-2 col-xs-2 bulb-holder">
				<div class="bulb" id="bulb_pink"></div>
			</div>
			<div class="col-md-2 col-xs-2 bulb-holder">
				<div class="bulb" id="bulb_orange"></div>
			</div>
		</div>
		<div class="row">
			<div class="col-md-12 text-center">
				<img src="image/banner.png" class="bannar">
			</div>
		</div>
		<!-- <div class="row message">
			<div class="col-md-12"><p>Khushbu</p></div>
		</div> -->
		<div class="row cake-cover">
			<div class="col-md-12 texr-center">
				<div class="cake">
				  <div class="velas">
				    <div class="fuego"></div>
				    <div class="fuego"></div>
				    <div class="fuego"></div>
				    <div class="fuego"></div>
				    <div class="fuego"></div>
				  </div>
				  <div class="cobertura"></div>
				  <div class="bizcocho"></div>
				</div>
			</div>
		</div>
		<div class="row message">
			<div class="col-md-12">
				<p>20 岁 生 日 快 乐</p>
				<p>栗　　儿　　姐</p>
			</div>
		</div>
		<p style="display: none;" id="blank">　</p>
		<center id="cen1">
			<div id="pho1" style="display: inline-block;">
				<div class="photo sample4" style="display: none;" id="pic11">
					<a href="#pic1"><span></span><img src="pic/pic1.jpg" alt="image" class="picbox"></a>
				</div>
				<div class="photo sample4" style="display: none;" id="pic12">
					<a href="#pic2"><span></span><img src="pic/pic2.jpg" alt="image" class="picbox"></a>
				</div>
				<div class="photo sample4" style="display: none;" id="pic13">
					<a href="#pic3"><span></span><img src="pic/pic3.jpg" alt="image" class="picbox"></a>
				</div>
				<div class="photo sample4" style="display: none;" id="pic14">
					<a href="#pic4"><span></span><img src="pic/pic4.jpg" alt="image" class="picbox"></a>
				</div>
			</div>
			<div id="pho2" style="margin-top: 15px; display: inline-block;">
				<div class="photo sample4" style="display: none;" id="pic15">
					<a href="#pic5"><span></span><img src="pic/pic5.jpg" alt="image" class="picbox"></a>
				</div>
				<div class="photo sample4" style="display: none;" id="pic16">
					<a href="#pic6"><span></span><img src="pic/pic6.jpg" alt="image" class="picbox"></a>
				</div>
				<div class="photo sample4" style="display: none;" id="pic17">
					<a href="#pic7"><span></span><img src="pic/pic7.jpg" alt="image" class="picbox"></a>
				</div>
				<div class="photo sample4" style="display: none;" id="pic18">
					<a href="#pic8"><span></span><img src="pic/pic8.jpg" alt="image" class="picbox"></a>
				</div>
			</div>
		</center>

		<center id="cen2">
			<div id="pho1" style="display: inline-block;">
				<div class="photo sample4" style="display: none;" id="pic21">
					<a href="#pic1"><span></span><img src="pic/pic1.jpg" alt="image" class="picbox"></a>
				</div>
				<div class="photo sample4" style="display: none;" id="pic22">
					<a href="#pic2"><span></span><img src="pic/pic2.jpg" alt="image" class="picbox"></a>
				</div>
				<div class="photo sample4" style="display: none;" id="pic23">
					<a href="#pic3"><span></span><img src="pic/pic3.jpg" alt="image" class="picbox"></a>
				</div>
			</div>
			<div id="pho2" style="margin-top: 10px; display: inline-block;">
				<div class="photo sample4" style="display: none;" id="pic24">
					<a href="#pic4"><span></span><img src="pic/pic4.jpg" alt="image" class="picbox"></a>
				</div>
				<div class="photo sample4" style="display: none;" id="pic25">
					<a href="#pic5"><span></span><img src="pic/pic5.jpg" alt="image" class="picbox"></a>
				</div>
				<div class="photo sample4" style="display: none;" id="pic26">
					<a href="#pic6"><span></span><img src="pic/pic6.jpg" alt="image" class="picbox"></a>
				</div>
			</div>
			<div id="pho2" style="margin-top: 10px; display: inline-block;">
				<div class="photo sample4" style="display: none;" id="pic27">
					<a href="#pic7"><span></span><img src="pic/pic7.jpg" alt="image" class="picbox"></a>
				</div>
				<div class="photo sample4" style="display: none;" id="pic28">
					<a href="#pic8"><span></span><img src="pic/pic8.jpg" alt="image" class="picbox"></a>
				</div>
			</div>
		</center>

	    <!-- 要放大显示的div -->
	    <div id="pic1" style="display:none;"><img src="pic/pic1.jpg" /></div>
	    <div id="pic2" style="display:none;"><img src="pic/pic2.jpg" /></div>
	    <div id="pic3" style="display:none;"><img src="pic/pic3.jpg" /></div>
	    <div id="pic4" style="display:none;"><img src="pic/pic4.jpg" /></div>
	    <div id="pic5" style="display:none;"><img src="pic/pic5.jpg" /></div>
	    <div id="pic6" style="display:none;"><img src="pic/pic6.jpg" /></div>
	    <div id="pic7" style="display:none;"><img src="pic/pic7.jpg" /></div>
	    <div id="pic8" style="display:none;"><img src="pic/pic8.jpg" /></div>


		<div class="navbar navbar-fixed-bottom">
			<div class="row">
				<div class="col-md-6 text-center col-md-offset-3">
					<button class="btn btn-primary" id="turn_on">欢迎小栗子的光临</button>
					<button class="btn btn-primary" id="play">开始奏乐</button>
					<button class="btn btn-primary" id="bannar_coming">喏，看呀</button>
					<button class="btn btn-primary" id="balloons_flying">万事胜意，不止春天</button>
					<button class="btn btn-primary" id="cake_fadein">希望这个善良的小女孩一直开心快乐</button>
					<button class="btn btn-primary" id="light_candle"> 所愿即所得</button>
					<button class="btn btn-primary" id="wish_message">小栗子生日快乐哇</button>
					<button class="btn btn-primary" id="story">共赴下一场山海</button>
					<!-- <button class="btn btn-primary" id="cake_cut">Lrt's Cut the Cake</button> -->
				</div>
			</div>
			<!-- <div class="col-md-2">
			</div>
			<div class="col-md-2">
			</div>
			<div class="col-md-2">
			</div>
			<div class="col-md-2">
			</div>
			<div class="col-md-2">
			</div> -->
		</div>


	</div>
</body>
<script src="js/jquery.min.js"></script>
<script src="js/content_zoom.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/effect.js"></script>
<script>
  (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
  (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
  m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
  })(window,document,'script','js/analytics.js','ga');

  ga('create', 'UA-58229732-1', 'auto');
  ga('send', 'pageview');

	$(document).ready(function() {
		$('#pho1 a').fancyZoom({scaleImg: true, closeOnClick: true});
		$('#pho2 a').fancyZoom({scaleImg: true, closeOnClick: true});
	});

</script>
</html>
